<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <link rel="stylesheet" href="./">
        <title></title>
        <style>
            form{
                width: 230px;
                height: 280px;
                line-height: 35px;
                padding: 20px;
                border: 1px solid #000;
                margin: 20px;
                box-shadow: 10px 15px 10px 0px #666;
                border-radius: 5%;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <form action="###" @submit.prevent="collect">
                <label>账号：<input type="text" v-model="userData.userName"></label>
                <br>
                <label>密码：<input type="password" v-model="userData.password" ></label>
                <br>
                <label>性别：
                    男<input type="radio" name="sex" :value="1" v-model="userData.sex">
                    女<input type="radio" name="sex" :value="0" v-model="userData.sex"></label>
                <br>
                <label>爱好：
                    跳舞<input type="checkbox" value="1" v-model="userData.hobby">
                    下棋<input type="checkbox" value="2" v-model="userData.hobby">
                    旅游<input type="checkbox" value="3" v-model="userData.hobby" ></label>
                <br>
                <label>所属地区：
                    <select v-model="userData.address" >
                        <option value="middle">华中</option>
                        <option value="east">华东</option>
                        <option value="north">华南</option>
                        <option value="south">华北</option>
                        <option value="west">华西</option>
                    </select>
                </label>
                <br>
                <label>其他：<textarea v-model="userData.others" ></textarea></label>
                <br>
                <button type="submit">提交</button>
            </form>
        </div>
        <script src="../js/vue.js"></script>
        <script>
            const vm = new Vue({
                data:{
                    userData:{
                        userName:"",
                        password:"",
                        sex: null,
                        hobby:[],
                        address:"",
                        others:"",
                    }
                },
                methods:{
                    collect(){
                        console.log(this.userData);
                    }
                }
            });
            vm.$mount("#app");
        </script>
    </body>
</html>